import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";
import postcsspxtoviewport from "postcss-px-to-viewport";
import svgr from "vite-plugin-svgr";

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), tailwindcss(), svgr()],
  css: {
    modules: {
      localsConvention: "camelCase", // 使用驼峰命名
      scopeBehaviour: "local", // 模块化行为
      generateScopedName: "[name]__[local]___[hash:base64:5]", // 生成类名规则
    },
    preprocessorOptions: {
      less: {
        javascriptEnabled: true, // 支持内联 JavaScript
      },
    },
    postcss: {
      plugins: [
        postcsspxtoviewport({
          unitToConvert: "px", // Units to convert
          viewportWidth: 750, // Design width (e.g., iPhone 6/7/8)
          unitPrecision: 5, // Decimal places for converted values
          viewportUnit: "vw", // Target viewport unit
          fontViewportUnit: "vw", // Font-specific viewport unit
          propList: ["*"], // Properties to convert (e.g., '*')
          selectorBlackList: ["ignore-"], // Classes to ignore
          minPixelValue: 1, // Minimum value to convert
          mediaQuery: true, // Convert px in media queries
          replace: true, // Replace original value with converted one
          exclude: [/node_modules/], // Exclude specific files or folders
        }),
      ],
    },
  },
  resolve: {
    extensions: [".js", ".jsx", ".json", ".ts", ".tsx"],
    alias: {
      "@": "/src",
    },
  },
});
